<!DOCTYPE html>
<html>
<head>
	<style>
		body {
			height: 100%;
			margin: 0;
			margin-top: 20px;
			overflow: hidden;
			text-align: center;
			font-family: arial;
		}
		
		canvas {
			border: 1px solid gray;
		}
	</style>
</head>
<body style="">
<!--[if IE]><script src="../js/explorercanvas/excanvas.js"></script><![endif]-->
<script src="../js/jsgamesoup.js"></script>
<script>
function startGame(gs) {
		// we're defining a new class called 'C' with a bunch of properties
		// there are two different draw and update functions for different states of C - "chill" and "antsy"
		// entities of C randomly switch between "chill" and "antsy"
		function C() {
			// set a random position, velocity, radius, and shade
			this.x = gs.random(0, gs.width);
			this.y = gs.random(0, gs.height);
			this.vx = gs.random(-3, 3);
			this.vy = gs.random(-3, 3);
			this.r = gs.random(10, 30);
			this.c = gs.random(100, 200);
			var state = false;
			
			// switch between states
			var changestate = function() {
				state = !state;
				// schedule another change
				gs.schedule(20, changestate);
			}
			// schedule the first one
			changestate();
			
			// glide around
			this.update = function() {
				// glide gracefully
				this.y = (this.y + this.vy + gs.canvas.height) % gs.canvas.height;
				this.x = (this.x + this.vx + gs.canvas.width) % gs.canvas.width;
			}
			
			// draw this circle
			this.draw = function(c, gs) {
				if (state) {
					c.fillStyle = 'rgba(' + parseInt(this.c) + ', ' + parseInt(this.c) + ', ' + parseInt(this.c) + ', 1.0)';
				} else {
					c.fillStyle = 'rgba(' + parseInt(this.c) + ', ' + parseInt(this.c - 100) + ', ' + parseInt(this.c - 100) + ', 1.0)';
				}
				c.beginPath();
				c.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
				c.closePath();
				c.fill();
			}
		}
		
		gs.addEntity(new C());
}
</script>
<canvas id='surface' jsgs='startGame'></canvas>
<div>Testing out the frame based scheduler.</div>
</body>
</html>

